<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.comment{
			list-style: none;
			border:1px solid transparent;
			width: 30%;
			margin-bottom: 10px;
			padding: 10px;
		}
		.comment .view{
			cursor:pointer
		}
		</style>
	</head>
	<body>
		<div>
			<form action="#">
				<input type="text" class='commentInput' placeholder="请输入姓名"/>
				<input type="text" class='commentInput' placeholder="请输入内容" />
				<button onclick='submitComment()'>输入</button>
			</form>
		</div>
		<hr>
		<div >
			<ul id='list'></ul>
		</div>
	</body>
	<script>
		var commentList=[]
		var ulTag = document.getElementById('list')
		window.onload = function(){
			flushList()
		}
		// 刷新评论
		function flushList(){
			var list = sessionStorage.getItem('discuss')
			if(list){
				commentList = JSON.parse(list)
				flushListPos(commentList)
				ulTag.innerHTML = getComment(commentList)
			}
			// 为评论中的按钮绑定事件
			var viewButtons = document.getElementsByClassName('view')
			for(let i=0;i<viewButtons.length;i++)
				viewButtons[i].addEventListener('click',function(e){
					view(e.target.classList[1])
				})
			var submitSubButtons = document.getElementsByClassName('subSubmit')
			for(let i=0;i<submitSubButtons.length;i++)
				submitSubButtons[i].addEventListener('click',function(e){
					submitSubComment(e.target.classList[1])
				})
		}
		// 提交评论
		function submitComment(){
			var e = document.getElementsByClassName('commentInput')
			if(e[0].value && e[1].value){
				let dis = {'name':e[0].value,'content':e[1].value,'in':[],'pos':String(commentList.length)}
				commentList.unshift(dis)
				flushListPos(commentList)
				flushList()
			}else{
				alert('姓名或内容不能为空')
			}
		}
		// 取出评论
		function getComment(list){
			var liTag = ''
			if(list.length){
				list.forEach(item=>{
					liTag += '<li class="comment '+item.pos+'">'+
						'<p>姓名：'+item.name+'</p>'+
						'<p>内容：'+item.content+'</p><span class="view '+item.pos+'">[+]</span>'+
						'<div class="content" style="visibility: hidden;">'+
						'<form action="#">'+
						'<input type="text" class="'+item.pos+'" placeholder="请输入姓名"/>'+
						'<input type="text" class="'+item.pos+'" placeholder="请输入内容"/>'+
						'<button class="subSubmit '+item.pos+'" onclick="submitSubComment("'+item.pos+'")">输入</button>'+
					'</form>'+'</div>'+'</li>'
					if(item.in.length)
						liTag += '<ul>' +getComment(item.in)+'</ul>'
				})
			}
			return liTag
		}
		//刷新评论位置
		function flushListPos(e,current=0,pre=[]){
			e.forEach((item,index) => {
				var poss = item.pos.split('-')
				poss[current] = index
				if(pre.length)
					pre.forEach((item2,index2)=>{
						poss[index2] = item2
					})
				item.pos = poss.join('-')
				if(item.in.length){
					if(poss.length > 1)
						poss.pop()
					flushListPos(item.in,current+1,poss)
				}
			})
			sessionStorage.setItem('discuss',JSON.stringify(commentList))
		}
		// 显示评论
		function view(e){
			var en = document.getElementsByClassName(e)[0]
			console.log(en.children)
			en.children[2].innerHTML = (en.children[2].innerHTML == '[+]' ? '[-]' : '[+]')
			en.children[3].style.visibility = (en.children[3].style.visibility == 'hidden' ? 'visible' : 'hidden')
		}
		// 根据位置获取评论
		function  getCommentByPos(list,e){
			var result
			list.forEach( item =>{
				if(item.pos == e)
					result = item
				if(item.in.length && !result)
					result = getCommentByPos(item.in,e)
			})
			return result ? result : 'nothing'
		}
		// 提交子级评论
		function submitSubComment(n){
			var e = document.getElementsByClassName(n)
			if(e[2].value && e[3].value){
				var subList = getCommentByPos(commentList,n)
				let dis = {'name':e[2].value,'content':e[3].value,'in':[],
				'pos':subList.pos +'-'+ String(subList.in.length)}
				subList.in.unshift(dis)
				flushListPos(commentList)
				flushList()
			}else{
				alert('姓名或内容不能为空')
			}
		}
	</script>
</html>
